<template>
  <div class="wrapper clearfix">
	  <div class="icon clearfix" v-for='item of iconImg' :key='item.id'>
	  		  <div class="icon_img"><img class='img' :src="item.imgUrl"></div>
	  		  <div class="icon_desc">{{item.Desc}}</div>
	  </div>
  </div>
</template>

<script>
export default {
  name: 'homeCatalog',
  data(){
	  return{
		  iconImg:[
			  {
				  id:'001',
				  imgUrl:require('@/assets/img/rBANC1qozNqAb3vRAAAD_Qg-dt4234.png'),
				  Desc:'火车票'
			  },
			  {
			      id:'002',
			      imgUrl:require('@/assets/img/rBLkCFqozNqAJqPYAAAFlYq1v7A413.png'),
				  Desc:'机票'
			  },
			  {
			      id:'003',
			      imgUrl:require('@/assets/img/rBLkBVqozNqAGbVbAAADpuwJ0xY082.png'),
				  Desc:'酒店住宿'
			  },
			  {
			      id:'004',
			      imgUrl:require('@/assets/img/rBLkCFqozNqAF4UUAAAFH-2jq70957.png'),
				  Desc:'景点门票'
			  }
		  ]
	  }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
	width:100%
	.icon
		float:left
		width:25%
		margin:20px auto
		.img
			display:block
			margin:0 auto
			width:50%
		.icon_desc
			padding:10px 0 0 0
			text-align:center
.clearfix:after
	display:block
	content:''
	clear:both
</style>
